<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>维修保障设备</title>
		<link type="text/css" href="css/content.css" rel="stylesheet" />
		<link type="text/css" href="css/animation.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/animation.js"></script>
		<script type="text/javascript" src="js/public.js"></script>
		<script type="text/javascript" src="js/highcharts.js"></script>
        <script type="text/javascript" src="js/highcharts-3d.js"></script>
        <script  th:inline="javascript">
        /*<![CDATA[*/
        	$(function () {
			    $('#container').highcharts({
			        chart: {
			            type: 'column'
			        },
			        title: {
			            text: '<b>工作完成量分析</b>'
			        },
			        xAxis: {
			            categories:years,
			            crosshair: true
			        },
			        yAxis: {
			            min: 0,
			            title: {
			                text: '完成数量'
			            }
			        },
			        tooltip: {
			            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
			            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
			                '<td style="padding:0"><b>{point.y:.1f} 个</b></td></tr>',
			            footerFormat: '</table>',
			            shared: true,
			            useHTML: true
			        },
			        plotOptions: {
			            column: {
			                pointPadding: 0.2,
			                borderWidth: 0
			            }
			        },
			        series: [{
			            name: '已完成数量',
			            color:'#3db9d3',
			            data: ywc1
			
			        }, {
			            name: '未完成数量',
			            color:'#fc6e51',
			            data: wwc1
			
			        }, {
			            name: '延迟数量',
			            color:'#ffce54',
			            data: ycwc1
			
			        }]
			    });
			});
        	var myp=[[${#httpServletRequest.getParameter('myp')}]];
        	var years=[[${years}]];
        	var ywc1=[[${ywc1}]];
            var wwc1=[[${wwc1}]];
            var ycwc1=[[${ycwc1}]];
            /*]]>*/  
             </script>
	</head>
	<body>
		<!--返回-->
		<div class="back" onclick="loadPage('/planType')"><img src="/images/back.png" /></div>
		<div th:include="header :: header"></div>
		<div class="header-title">
			<span>计划管理统计</span>
		</div>
		<div class="spare-a">
			<div class="spare-al">
				<div style="height:10px"></div>
				<ul>
					<a onclick="location='/plan-wwctj?myp='+myp">
					<li>
						<p>未完成统计</p>
					</li>
					</a>
					<a onclick="location='/plan-antj?myp='+myp">
					<li class="active">
						<p>按年统计</p>
					</li>
					</a>
				</ul>
			</div>
			<div class="spare-ar">
				<div class="zbdzll">
					<div class="zbdzll-a clearfix">
						<div class="zbdzll-al">按年统计</div>
					</div>
					<div class="zbdzll-b">
						<div id="container" style="width:100%;height:500px"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
